<template>
	<view class="content">
		<!-- 生成海报 -->
		<!-- <button type="primary" @tap="openPoster()">生成海报</button> -->
		<!-- 图片展示由自己实现 -->
		<view class="flex_row_c_c modalView" :class="qrShow ? 'show' : ''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px"><image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image></view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- 画布 -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{ width: (poster.width || 10) + 'px', height: (poster.height || 10) + 'px' }"></canvas>
		</view>
	</view>
</template>

<script>
import _app from '@/utils/QS-SharePoster/app.js';
import { getSharePoster } from '@/utils/QS-SharePoster/QS-SharePoster.js';

export default {
	data() {
		return {
			poster: {},
			qrShow: false,
			canvasId: 'default_PosterCanvasId',
			count: 0,
			qrCode: ''
		};
	},
	props: {
		memberId: {
			type: String,
			default: ''
		}
	},
	methods: {
		getQrcode() {
			this.$postAction(this.$api.getQrcode, {
				scene: this.memberId,
				page: 'pages/splash/splash'
			}).then(da => {
				if (da.code == 0) {
					this.qrCode = da.data.img_url;
					this.shareFc();
				}
			});
		},
		async openPoster() {
			this.getQrcode();
			//this.shareFc();
		},
		async shareFc() {
			let _this = this;
			try {
				this.count++;
				const d = await getSharePoster({
					_this: _this, //若在组件中使用 必传
					type: 'testShareType',
					formData: {
						//访问接口获取背景图携带自定义数据
					},
					posterCanvasId: _this.canvasId, //canvasId
					delayTimeScale: 200, //延时系数
					background: {
						width: 10,
						height: 10,
						backgroundColor: '#fff'
					},
					setCanvasWH({ bgObj }) {
						console.log('bgObj', bgObj);
						_this.poster = bgObj;
					},
					drawArray({ bgObj, type, bgScale, setBgObj, getBgObj }) {
						return [
							{
								type: 'image',
								id: 'productImage',
								url: '/static/share.jpg',
								dx: 0,
								dy: 0,
								alpha: 1,
								serialNum: 0,
								roundRectSet: {
									r: 10
								},
								infoCallBack(imageInfo) {
									let width = 750;
									let height;
									height = (width / imageInfo.width) * imageInfo.height;
									setBgObj({
										width: width,
										height: height
									});
									return {
										dWidth: width,
										dHeight: height
									};
								}
							},

							{
								type: 'image',
								url: _this.qrCode,
								serialNum: 4,
								allInfoCallback({ drawArray }) {
									const productImage = drawArray.find(item => item.id === 'productImage');
									const addHeight = productImage.dHeight;
									return {
										dx: getBgObj().width - 230,
										dy: addHeight - 220,
										dWidth: 200,
										dHeight: 200
									};
								}
							}
						];
					}
				});
				_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath);
				_this.poster.finalPath = d.poster.tempFilePath;
				_this.qrShow = true;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				// console.log(JSON.stringify(e));
			}
		},
		saveImage() {
			// #ifndef H5
			uni.saveImageToPhotosAlbum({
				filePath: this.poster.finalPath,
				success(res) {
					_app.showToast('保存成功');
				}
			});
			// #endif
			// #ifdef H5
			_app.showToast('保存了');
			// #endif
		},
		share() {
			// #ifdef APP-PLUS
			_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
			// #endif

			// #ifndef APP-PLUS
			_app.showToast('分享了');
			// #endif
		},
		hideQr() {
			this.qrShow = false;
		}
	}
};
</script>

<style>
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

.flex_row_c_c {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.modalView {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	outline: 0;
	transform: scale(1.2);
	perspective: 2500upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out;
	pointer-events: none;
	backface-visibility: hidden;
	z-index: 999;
}

.modalView.show {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.flex_column {
	display: flex;
	flex-direction: column;
	padding-top: 10%;
}

.backgroundColor-white {
	background-color: white;
}

.border_radius_10px {
	border-radius: 10px;
}

.padding1vh {
	padding: 1vh;
}

.posterImage {
	width: 80vw;
}

.flex_row {
	display: flex;
	flex-direction: row;
}

.marginTop2vh {
	margin-top: 2vh;
}
</style>
